<template>
  <div>
    <van-swipe-cell v-for="(goods, index) in shopcartStore.goodsList" :key="index">
      <van-card
        :title="goods.name"
        :desc="goods.sell_point"
        :price="goods.price"
        :num="goods.num"
        :thumb="goods.image"
      >
      </van-card>
      <template #right>
        <van-button
          square
          text="加入购物车"
          type="danger"
          class="delete-button"
          @click="addCart(goods)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useShopcartStore } from '@/store/shopcart'
const shopcartStore = useShopcartStore()

onMounted(async () => {
  await shopcartStore.initGoodsList()
  console.log(shopcartStore.goodsList.value)
})
const addCart = (goods) => {
  console.log(goods)
  shopcartStore.addCart(goods)
}
</script>

<style lang="scss" scoped>
.goods-card {
  margin-bottom: 5px;
  background-color: white;
}

.delete-button {
  height: 100%;
  width: 110px;
}
</style>
